<style lang="less">
  .dialog-form-label{
    label{
      width: 120px;
    }
  }
  .dialog-form-content{
    width: 350px
  }
</style>

<template>
  <el-dialog title="异常登记" :visible.sync="errorDialogVisible" size="tiny">
    <el-form ref="errorForm"  label-width="120px" :model="errorForm">
      <el-form-item
        prop="register"
        :rules="[{ required: true, message: '请输入登记人', trigger: 'blur' }]"
        label="登记人">
        <el-input class="dialog-form-content" v-model="errorForm.register"></el-input>
      </el-form-item>
      <el-form-item
        prop="registerTime"
        :rules="[{ type: 'date', required: true, message: '请选择登记时间', trigger: 'change' }]"
        label="登记时间">
        <el-date-picker
          style="width: 350px"
          type="datetime" v-model="errorForm.registerTime"></el-date-picker>
      </el-form-item>
      <el-form-item
        prop="description"
        :rules="[{ required: true, message: '请输入异常描述', trigger: 'blur' }]"
        label="异常描述">
        <el-input class="dialog-form-content" type="textarea" v-model="errorForm.description"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
          <el-button @click="errorDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="onHandleAddError" :loading="loading">确 定</el-button>
        </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'SignOffError',
  componentName: 'SignOffError',
  data () {
    return {
      loading: false,
      selectedSignOff: null,
      errorDialogVisible: false,
      errorForm: {
        register: null,
        registerTime: null,
        description: null
      }
    };
  },
  props: {
    handleAddError: Function
  },
  methods: {
    show (signOff) {
      this.selectedSignOff = signOff;
      if (this.$refs.errorForm) {
        this.$refs.errorForm.resetFields();
      }
      this.errorDialogVisible = true;
      this.loading = false;
    },
    hide () {
      this.loading = true;
      this.errorDialogVisible = false;
    },
    onHandleAddError () {
      this.loading = false;
      this.$refs.errorForm.validate((valid) => {
        if (valid) {
          this.handleAddError(this.errorForm);
        }
      });
    }
  }
};
</script>
